div1
div2
div3
dvi4
div5
div6
div7
div8
Powrót do głównej strony
Kod w html:
</head>
<body style="background-color: darkolivegreen;">
<div class="grid-kontener">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">dvi4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
<div class="div7">div7</div>
<div class="div8">div8</div>
</div>
Kod w css:
.grid-kontener{
display: grid;
grid-template-columns: 20vh 20vh 40vh 40vh ;
grid-template-rows: 5vh 8vh 8vh 8vh 8vh 8vh 8vh;
text-align: center;
margin: auto;
margin-top: 40px;
}
.div1{
background-color: chartreuse;
grid-row: 1/2;
grid-column: 1/5;
border: 1px solid red;
}
.div2{
background-color: aqua;
grid-column: 1/2;
grid-row: 2/8;
border: 1px solid red;
}
.div3{
background-color: brown;
grid-row: 2/8;
grid-column: 2/3;
border: 1px solid red;
}
.div4{
background-color: rgb(30, 219, 30);
grid-column: 3/4;
grid-row: 2/5;
border: 1px solid red;
}
.div5{
background-color:salmon;
border: 1px solid red;
grid-row: 5/8;
grid-column: 3/4;
}
.div6{
background-color: cornflowerblue;
border: 1px solid red;
grid-row: 2/4;
grid-column: 4/5;
}
.div7{
background-color: brown;
grid-row: 4/6;
grid-column: 4/5;
border: 1px solid red;
}
.div8{
background-color: darkgoldenrod;
border: 1px solid red;
grid-row: 6/8;
grid-column: 4/5;
}